<template>
  <view class="chat-container">
    <!-- 头部 -->
    <view class="header">
      <image class="avatar" :src="friendAvatar"></image>
      <text class="username">{{ friendName }}</text>
    </view>

    <!-- 聊天内容区 -->
    <view class="chat-content">
      <view v-for="(message, index) in messages" :key="index" class="message-container">
        <image class="avatar" v-if="message.isMe" :src="myAvatar"></image>
        <view class="message" :class="{ 'is-me': message.isMe }">
          {{ message.content }}
        </view>
        <image class="avatar" v-if="!message.isMe" :src="friendAvatar"></image>
      </view>
    </view>

    <!-- 输入框 -->
    <view class="input-box">
      <image class="icon" src="/static/images/chat/emoji.png"></image>
      <textarea class="input" placeholder="请输入消息"></textarea>
      <image class="icon" src="/static/images/chat/send.png"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      friendName: '张三',
      friendAvatar: '/static/images/avatar/zhangsan.jpg',
      myAvatar: '/static/images/avatar/my-avatar.jpg',
      messages: [
        { content: '你好啊', isMe: false },
        { content: '我也很好', isMe: true },
        { content: '有什么事情吗？', isMe: false },
        { content: '没有呢，就是来问候一下', isMe: true },
      ],
    }
  },
}
</script>

<style lang="scss">
.chat-container {
  height: 100%;
  padding-top: 36px;

  .header {
    display: flex;
    align-items: center;
    padding: 16px;
  }

  .username {
    font-size: 18px;
    margin-left: 8px;
  }

  .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
  }

  .chat-content {
    overflow-y: scroll;
    padding: 16px;
    flex: 1;
  }

  .message-container {
    display: flex;
    margin-bottom: 12px;

    .avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      margin-right: 8px;
    }

    .message {
      background-color: #E5E5EA;
      padding: 8px 12px;
      border-radius: 8px;
      max-width: 60%;
      word-wrap: break-word;

      &.is-me {
        background-color: #007AFF;
        color: white;
        align-self: flex-end;
      }
    }
  }

  .input-box {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: white;

    .icon {
      width: 24px;
      height: 24px;
      margin-right: 16px;
    }

    .input {
      border: none;
      flex: 1;
      min-height: 40px;
      border-radius: 20px;
      padding: 8px 12px;
      background-color: #F6F6F6;
      font-size: 16px;
    }
  }
}
</style>
